<template>
  <div class="login_bg">

    <el-card shadow="never">
      <div class="number-data">
        <div class="item">
          <h2>
            待发货订单
            <el-tooltip effect="light">
              <template #content>
                <div style="width: 200px; line-height: 2">
                  即通常说的Page
                  View(PV)，用户每打开一个网站页面就被记录1次。用户多次打开同一页面，浏览量值累计。
                </div>
              </template>
              <el-icon>
                <QuestionFilled/>
              </el-icon>
            </el-tooltip>
          </h2>
          <p>{{ orderDeliveryNum.num }}</p>
        </div>
        <div class="item">
          <h2>
            上架中的商品
            <el-tooltip effect="light">
              <template #content>
                <div style="width: 200px; line-height: 2">
                  一天之内您网站的独立访客数(以Cookie为依据)，一天内同一访客多次访问您网站只计算1个访客。
                </div>
              </template>
              <el-icon>
                <QuestionFilled/>
              </el-icon>
            </el-tooltip>
          </h2>
          <p>{{ productSaleNum.num }}</p>
        </div>
        <div class="item">
          <h2>
            总用户数
            <el-tooltip effect="light">
              <template #content>
                <div style="width: 200px; line-height: 2">
                  一天之内您网站的独立访问ip数。
                </div>
              </template>
              <el-icon>
                <QuestionFilled/>
              </el-icon>
            </el-tooltip>
          </h2>
          <p>{{ userNum.num }}</p>
        </div>
        <div class="item">
          <h2>
            下单转化率
            <el-tooltip effect="light">
              <template #content>
                <div style="width: 200px; line-height: 2">
                  只浏览了一个页面便离开了网站的访问次数占总的访问次数的百分比。
                </div>
              </template>
              <el-icon>
                <QuestionFilled/>
              </el-icon>
            </el-tooltip>
          </h2>
          <p>27.92%</p>
        </div>
        <div class="item">
          <h2>
            客单价
            <el-tooltip effect="light">
              <template #content>
                <div style="width: 200px; line-height: 2">
                  访客在一次访问中，平均打开网站的时长。即每次访问中，打开第一个页面到关闭最后一个页面的平均值，打开一个页面时计算打开关闭的时间差。
                </div>
              </template>
              <el-icon>
                <QuestionFilled/>
              </el-icon>
            </el-tooltip>
          </h2>
          <p>00:19:05</p>
        </div>
      </div>
      <div class="chart">
        <el-row>
          <el-col :span="12">
            <LineChart height="250px" title="最近三十天登录" subtext="登录数据" model="last_30_day_login"
                       :convert="handleData"></LineChart>
          </el-col>
          <el-col :span="12">
            <BarChart height="250px" title="最近三十天登录" subtext="登录数据" model="last_30_day_login" labelKey="dayKey"
                      dataKey="num"></BarChart>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-row :gutter="15">
      <el-col :span="12">
        <el-card shadow="never">
          <Pie height="250px" title="最近三十天销售"  model="login_time" labelKey="time_period"
               dataKey="login_count"></Pie>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never">
          <Pie height="250px" title="最近三十天销售"  model="login_data" labelKey="时间段"
               dataKey="登录次数"></Pie>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col :span="6">
        <Time/>
      </el-col>
      <el-col :span="6">
        <Progress/>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import Time from "./../components/time.vue";
import Progress from "./../components/progress.vue";
import LineChart from "./..//components/echarts/LineChart.vue";
import BarChart from "./..//components/echarts/BarChart.vue";
import Pie from "./..//components/echarts/Pie.vue";

import {fetchOne} from "@/uses/fetchData";


const {data: productSaleNum} = fetchOne("shop_count_product_onsale")
const {data: orderDeliveryNum} = fetchOne("shop_count_order_delivery")
const {data: userNum} = fetchOne("count_user_num")


const handleData = (res, target) => {
  target.series[0].data = res.data.map(item => item["num"]);
  target.xAxis.data = res.data.map(item => item["dayKey"]);
}
</script>

<style scoped>
.el-card {
  margin-bottom: 15px;
}

.number-data {
  display: flex;
}

.number-data .item {
  flex: 1;
  border-right: 1px solid #f0f0f0;
  padding: 0 20px;
}

.number-data .item:last-child {
  border: 0;
}

.number-data .item h2 {
  font-size: 12px;
  color: #787a7d;
  font-weight: normal;
}

.number-data .item h2 i {
  margin-left: 5px;
  color: #8cc5ff;
  cursor: pointer;
}

.number-data .item p {
  font-size: 20px;
  color: #121315;
  margin-top: 10px;
}
</style>
